<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<head>
<%@ include file="../common/required.jspf"%>
<title>网上书城-购物车</title>
<link rel="stylesheet" type="text/css"
	href="${ctx}/statics/common/vendor/normalize.min.css" />
<!-- 可选 -->
<link rel="stylesheet"
	href="${ctx}/statics/common/vendor/font-awesome/css/font-awesome.min.css" />
<!-- 可选 -->
<link rel="stylesheet"
	href="${ctx}/statics/common/vendor/swiper/swiper.min.css" />
<link rel="stylesheet" href="${ctx}/statics/store/css/common.css" />
<link rel="stylesheet" href="${ctx}/statics/store/css/shopcar.css" />
<!-- 苹果设备在桌面上生成的快捷图标 -->
<link rel="apple-touch-icon"
	href="${ctx}/statics/store/img/apple-touch-icon.png">
<link rel="icon" href="${ctx}/favicon.ico">
</head>

<body>
	<%@ include file="../common/header.jspf"%>
	<section style="width: 100%; height: .6rem;"></section>

	<section class="shopcar-container">
	<form id="form1" action="${ctx }/store/shopping/addToOrder" method="post">
		<c:forEach items="${products.list }" var="order" varStatus="v">
			<div class="container-item">
					<div class="item-top">
						<img src="${ctx}/statics/store/img/${order.product.pic}" />
						<div class="top-right">
							<a href="${ctx }/shopping/product/productInfo?productId=${order.product.id} ">
							<span>${order.product.name}</span>
							</a>
							<input type="hidden" name="storeOrderProducts[${v.count-1}].storeCartId" id="storeCartId" value="${order.id }" >
							<input type="hidden" name="storeOrderProducts[${v.count-1}].storeProductId" id="storeProductId" value="${order.product.id }" >
							<input type="hidden" name="storeOrderProducts[${v.count-1}].name" id="name" value="${order.product.name }" >
						</div>
					</div>
				<div class="item-center">
					<div class="center-span">
						<span>数量:</span>
					</div>
					<div class="center-inner">
						<div onclick="shoppingCart.reduceCount(${v.count})"
							class="inner-Reduction">-</div>
						<input name="storeOrderProducts[${v.count-1}].count" id="count${v.count}" class="shopcar-value" type="text"
							style="width: 1.2rem; height: .3rem; border: none; text-align: center; color: #990000; font-size: .16rem; font-weight: bold; position: absolute; top: 0; left: 21%;"
							onchange="shoppingCart.onChangeCount(${v.count})" value="${order.count}" />
						<input type="hidden" name="subtotal" id="subtotal${v.count}" value="${order.product.price }" >
						<div onclick="shoppingCart.addCount(${v.count})"
							class="inner-plus">+</div>
					</div>
				</div>
				<div class="item-bottom">
					<div class="bottom-span">
						<span>小计：</span>
					</div>
					<div class="bottom-right">
						<input type="hidden" id="singlePrice${v.count}" value="${order.product.price }"> 
							<span class="price">￥</span><span name="totalPriceNumber" id="totalPrice${v.count}" class="price">${order.product.price*order.count }</span>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="hidden" name="storeOrderProducts[${v.count-1}].subtotal" id="subtotal${v.count}" value="${order.product.price*order.count }" >
						<a style="display: inline;" href="${ctx }/store/shopping/deleteTheShopcar?productId=${order.id }"><i class="fa fa-trash-o fa-2x right-delete"></i></a>
					</div>
				</div>
			</div>
		</c:forEach>
		</form>
		<c:if test="${empty products.list}">
			<div class="container-inner" style="display: block">
				<div class="inner-car">
					<img src="${ctx}/statics/store/img/cart_pic.png" />
				</div>
				<p>您还没有宝贝，赶快去逛逛吧!</p>
				<div class="inner-now">
					<a href="${ctx }/shopping/product/showAllProducts.action">马上去逛逛</a>
				</div>
			</div>
		</c:if>
	</section>

	<section style="width: 100%; height: .5rem;"></section>
	<footer class="shopcar-footer">
		<div class="footer-left">
			<a style="display: inline;" href="${ctx }/store/shopping/deleteAllShopcar"><i class="fa fa-trash-o fa-2x clear"></i> <span>清空</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="left-price">总价：￥ <span id="allTotalPrice">0</span></span>
		</div>
		<div class="footer-right">
			<a href="#" onclick="shoppingCart.settle()">结算</a>
		</div>
	</footer>

	<script src="${ctx }/statics/store/js/resize.js"></script>
	<script src="${ctx }/statics/common/vendor/zepto.min.js"></script>
	<script
		src="${ctx }/statics/common/vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
	<script
		src="${ctx }/statics/common/vendor/swiper/swiper.animate1.0.2.min.js"></script>
	<script src="${ctx }/statics/common/vendor/hammer.min.js"></script>
</body>
<script type="text/javascript">
		var shoppingCart = {
				init : function(){
					shoppingCart.changePage();
					shoppingCart.allTotalPrice = $("#allTotalPrice");
					shoppingCart.changeAllTotalPrice();
				},
				changePage: function(){
					$(".header-list li").removeClass("list-active");
					$("#shoppingCartPage").addClass("list-active");
				},
				changeTotalPrice:function(number,count){
					var totalPrice = $("#totalPrice" + number);
					var singlePrice = Number($("#singlePrice" + number).val());
					var subTotal = $("#subtotal" + number);
					var totalPriceNumber = parseFloat(singlePrice * count).toFixed(2);
					totalPrice.text(totalPriceNumber);
					subTotal.val(totalPriceNumber);
				},
				changeAllTotalPrice:function(){
					var list = $("[name='totalPriceNumber']");
					var allTotalPriceNumber = 0;
					for(var i=0 ; i < list.length ; i++){
						allTotalPriceNumber += Number(list[i].innerText);
					}
					shoppingCart.allTotalPrice.text(parseFloat(allTotalPriceNumber).toFixed(2));
				},
				checkCount : function(count){
					if(count <= 0){
						count = 1;
					}else if(count >= 99){
						count = 99;
					}
					return count;
				},
				addCount:function(number){
					var countValue = $("#count"+number);
					count = Number(countValue.val());
					count++;
					count = shoppingCart.checkCount(count);
					countValue.val(count);
					shoppingCart.changeTotalPrice(number,count);
					shoppingCart.changeAllTotalPrice();
				},
				reduceCount:function(number){
					var countValue = $("#count"+number);
					count = Number(countValue.val());
					count--;
				 	count = shoppingCart.checkCount(count);
					countValue.val(count);
					shoppingCart.changeTotalPrice(number,count);
					shoppingCart.changeAllTotalPrice();
				},
				onChangeCount : function(number){
					var count = Number($("#count" + number).val());
					$("#count" + number).val(shoppingCart.checkCount(count))
					shoppingCart.changeTotalPrice(number,shoppingCart.checkCount(count));
					shoppingCart.changeAllTotalPrice();
				},
				settle : function(){
					$("#form1").submit();
				}
				
			}
			$(function(){
				shoppingCart.init();
			})
			
		</script>
</html>
